import React from 'react';
import './Login.scss';
import { LoginApp } from '../../api/User';
import {userStore} from '../../store/index';
import * as action from '../../store/action';
import { List, InputItem, Toast,Button } from 'antd-mobile';
import { setStorage } from '../../util/storage';
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
const ismobile = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
let moneyKeyboardWrapProps;
if (isIPhone) {
  moneyKeyboardWrapProps = {
    onTouchStart: e => e.preventDefault(),
  };
}
 class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            deviceId:12315,
            deviceName:'phone',
            mobile:'',
            pwd:''
        }
        
        this.MobileRef=React.createRef();
        this.PwdRef = React.createRef();

        this.login = this.login.bind(this);
        this.changeMobile = this.changeMobile.bind(this);
        this.changePwd = this.changePwd.bind(this);
    }
    
    login(){
        if(this.state.mobile===''||!(ismobile.test(this.state.mobile))){
            Toast.info('请输入正确的手机号码')
            this.MobileRef.current.focus()
            return
        }
        if(this.state.pwd===''){
            this.PwdRef.current.focus()
            Toast.info('请输入您的登录密码')
            return
        }
        LoginApp(this.state).then((res)=>{
            userStore.dispatch(action.setToken(res.data.token))
            setStorage('userToken',res.data.token)
            this.props.history.push('/');
        })
    }
    changeMobile(event){
        this.setState({
            mobile:event
        })
    }
    changePwd(event){
        this.setState({
            pwd:event
        })
    }
    render(){
        return(
            <div className="login-form">
                <h2>React脚手架</h2>
                <List>
                    <InputItem 
                        type="number" 
                        placeholder="请输入您的手机号码"
                        clear
                        onChange={this.changeMobile}
                        maxLength="11"
                        ref={this.MobileRef}
                        moneyKeyboardWrapProps={moneyKeyboardWrapProps}
                    >手机号码</InputItem>
                </List>
                <List>
                    <InputItem 
                        type="password" 
                        placeholder="请输入您的登录密码"
                        clear
                        ref={this.PwdRef}
                        onChange={this.changePwd}
                        moneyKeyboardWrapProps={moneyKeyboardWrapProps}
                    >登录密码</InputItem>
                </List>
                <Button type="primary" className="login-btn" onClick={this.login}>立即登录</Button>
                <p>账号：13541078632</p>
                <p>密码：7967599</p>
            </div>
                
         )
    }
}
export default Login